<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <script src="../js/jquery-1.9.1.min.js"></script>
    <link rel="stylesheet" href="../font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/RoleAdd.css">
    <script src="../js/RoleAdd.js"></script>
    <script src="../js/validate.js"></script>
    <title>绘梦之约</title>
    <style>
        select {
            width: 250px;
        }

        input {
            width: 240px;
        }
    </style>
</head>


<body>
<div id="role_select">
    <div id="picture_area">
        <div id="picture1" role="盗贼">
            <img class="img_male" src="../images/career_images/盗贼-男.png">
            <img class="img_female" src="../images/career_images/盗贼-女.png">
        </div>
        <div id="picture2" role="萨满" style="left: 280px;width: 315px;">
            <img class="img_male" src="../images/career_images/萨满-男.png">
            <img class="img_female" src="../images/career_images/萨满-女.png">
        </div>
        <div id="picture3" role="圣骑士" style="left: 595px;">
            <img class="img_male" src="../images/career_images/圣骑士-男.png">
            <img class="img_female" src="../images/career_images/圣骑士-女.png">
        </div>
        <div id="picture4" role="战士">
            <img class="img_male" src="../images/career_images/战士-男.png">
            <img class="img_female" src="../images/career_images/战士-女.png">
        </div>
        <div id="picture5" role="恶魔猎手">
            <img class="img_male" src="../images/career_images/恶魔猎手-男.png">
            <img class="img_female" src="../images/career_images/恶魔猎手-女.png">
        </div>
        <div id="picture6" role="法师">
            <img class="img_male" src="../images/career_images/法师-男.png">
            <img class="img_female" src="../images/career_images/法师-女.png">
        </div>
        <div id="picture7" role="术士">
            <img class="img_male" src="../images/career_images/术士-男.png">
            <img class="img_female" src="../images/career_images/术士-女.png">
        </div>
        <div id="picture8" role="猎人">
            <img class="img_male" src="../images/career_images/猎人-男.png">
            <img class="img_female" src="../images/career_images/猎人-女.png">
        </div>
        <div id="picture9" role="牧师">
            <img class="img_male" src="../images/career_images/牧师-男.png">
            <img class="img_female" src="../images/career_images/牧师-女.png">
        </div>
        <div id="picture10" role="武僧">
            <img class="img_male" src="../images/career_images/武僧-男.png">
            <img class="img_female" src="../images/career_images/武僧-女.png">
        </div>
        <div id="picture11" role="死亡骑士">
            <img class="img_male" src="../images/career_images/死亡骑士-男.png">
            <img class="img_female" src="../images/career_images/死亡骑士-女.png">
        </div>
        <div id="picture12" role="德鲁伊">
            <img class="img_male" src="../images/career_images/德鲁伊-男.png">
            <img class="img_female" src="../images/career_images/德鲁伊-女.png">
        </div>
    </div>
    <div id="operate_area">
        <img id="last" src="../images/arrow_dark.png" alt="">
        <img id="next" src="../images/arrow_dark_right.png" alt="">
        <div id="desc_role"></div>
        <div id="nan"><input class="genderSelect" id="desc_male" name="gender" type="radio" value="male"/><label
                for="desc_male" class="desc_gender">男</label></div>
        <div id="nv"><input class="genderSelect" id="desc_female" name="gender" type="radio" value="female"
                            checked="checked"/><label
                for="desc_female" class="desc_gender">女</label></div>
        <img id="add" src="../images/addrole.png" alt="">
    </div>
</div>
<div id="role_info">
    <div id="role_info_top" style="overflow: hidden">
        <div id="role_info_top_left">
            <img id="role_selected" style="height: 500px;">
        </div>
        <div id="role_info_top_right">
            <form id="role_submit">
                <fieldset>
                    <legend style="margin-left:35px; ">角色信息</legend>
                    <table id="role_info_table" style="position: relative; left: -50px;">
                        <tr>
                            <td class="role_item">大区:</td>
                            <td class="role_info">
                                <select class="input-group" name="server_area" id="server_area" notNull="true">
                                    <option value="0">请选择</option>
                                </select>
                            </td>
                            <td class="role_item">服务器:</td>
                            <td class="role_info">
                                <select class="input-group" name="server_server" id="server_server" notNull="true">
                                    <option value="0">请选择</option>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td class="role_item">角色名:</td>
                            <td class="role_info"><input class="input-group" type="text" id="role_name" name="role_name"
                                                         notNULL="true" data_type="LENGTH,2,7"></td>
                            <td class="role_item">职业:</td>
                            <td class="role_info"><input class="input-group" type="text" name="career" id="career"
                                                         readonly
                                                         unselected="on" value=""></td>
                        </tr>
                        <tr>
                            <td class="role_item">阵营:</td>
                            <td class="role_info"><select class="input-group" name="camp" id="camp">
                                <option value="Alliance">联盟</option>
                                <option value="Horde">部落</option>
                            </select></td>
                            <td class="role_item">性别:</td>
                            <td class="role_info"><input class="input-group" type="text" id="sex" name="sex" readonly
                                                         unselected="on" value=""></td>
                        </tr>
                        <tr>
                            <td class="role_item">创建时间:</td>
                            <td class="role_info"><input class="input-group" type="date" id="GameRoleBirthDay"
                                                         name="GameRoleBirthDay" notNULL="true"></td>
                            <td class="role_item">等级:</td>
                            <td class="role_info"><input class="input-group" type="text" id="level" name="level"
                                                         notNULL="true"
                                                         data_type="NUM,0,120"></td>
                        </tr>
                        <tr>
                            <td class="role_item">公会:</td>
                            <td class="role_info"><input class="input-group" type="text" id="guild" name="guild"></td>
                            <td class="role_item">会阶:</td>
                            <td class="role_info"><input class="input-group" type="text" id="level_in_guild"
                                                         name="level_in_guild">
                            </td>
                        </tr>
                    </table>
                </fieldset>
                <hr>
                <fieldset>
                    <legend style="margin-left: 58px;">备注</legend>
                    <textarea id="rem" name="rem" cols="2" rows="6" style="OVERFLOW:   hidden"></textarea>
                </fieldset>
            </form>
        </div>
    </div>
    <div id="role_info_footer">
        <div>
            <div id="return"></div>
            <div id="submit"></div>
        </div>
    </div>

</div>

</body>

</html>